<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>登录页面</title>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<link th:href="@{css/font-awesome-4.7.0/css/font-awesome.min.css}" href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all"/>
<link th:href="@{/css/style.css}" href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" th:src="@{js/jquery.min.js}" src="js/jquery.min.js" ></script>
<script type="text/javascript" th:src="@{js/index.js}" src="js/index.js" ></script>

<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"/>
<script type="text/javascript" th:src="@{/plug/layui/layui.all.js}"  src="plug/layui/layui.all.js" ></script>

<script type="text/javascript">
var myCity = returnCitySN['cname'];
if(window != top){
	//session 失效 判断有没父页面，有，改变父页面地址
	top.location.href = location.href; 
}
$(function(){


});

function login(){
	// 准备参数
	var param = new Object();
	param.username = $.trim($("#name").val());
	param.password = $.trim($("#pass").val());

	if(param.username == ""){
		layer.alert('用户名不可为空', {icon: 0});
		return false;
	}else if(param.password == ""){
		layer.alert('密码不可为空', {icon: 0});
		return false;
	}

	$.ajax({
		type:"POST",
		async:true,  //默认true,异步
		data:param,
		dataType:'json',
		url:"/login",
		success:function(data){
			if(data.result == "success"){
				window.location.href = "/main";
			}else if(data.message == "PASSWORD_ERR" || data.message == "USERNAME_NOT_EXIST"){
				layer.alert('用户名或密码错误', {icon: 2});
				$("#name").val("");
				$("#password").val("")
			}else{
				layer.alert('登陆失败！请找管理员授权!', {icon: 2});
			}
	    },
	    error:function() {
	    	layer.alert('系统错误,服务器正忙！', {icon: 2});
	    }
	});
}


function regist(){
	var name = $("#regname").val();
	var password = $("#regpass").val();
	var reregpass = $("#reregpass").val();
	if(name&&password&&reregpass){
		if (!(password===reregpass)) {
			layer.open({
				title: '错误提示'
				, content: '两次密码不一致!'
			});
		}else {
			$.ajax({
				type:"POST",
				async:true,  //默认true,异步
				data:{"name":name,"password":password},
				dataType:'json',
				timeout:20000,
				url:"/doRegist",
				beforeSend: function () {
					layer.msg('拼命注册中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: 'auto', time:600000});
				},
				success:function(data){
					layer.alert(data.message, {icon: data.result=="success"?1:2},function() {
						window.location.href = "/main";
					});

				},
				error:function() {
					layer.alert('服务器错误,请联系开发人员！', {icon: 2});
				}
			});
		}

	}else {
		if (!name) {
			layer.open({
				title: '错误提示'
				, content: '姓名为必选项！'
			});
		}else if (!password) {
			layer.open({
				title: '错误提示'
				, content: '密码为必选项!'
			});
		}else if (!(reregpass)) {
			layer.open({
				title: '错误提示'
				, content: '两次密码不一致!'
			});
		}
	}
}

function key_down(num){
	if(num == 13) {
		var name = $.trim($("#name").val());
		var pass = $.trim($("#pass").val());
		
		if(name && pass){
			login();
		}else{
			layer.closeAll(); //疯狂模式，关闭所有层
		}
	}
}
</script>
</head>

<body onkeydown="key_down(event.keyCode);">

<div class="materialContainer">
	<div class="box">
		<div class="title">登录</div>
		<div class="input">
			<label for="name">用户名</label>
			<input type="text" name="name" id="name">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="pass">密码</label>
			<input type="password" name="pass" id="pass">
			<span class="spin"></span>
		</div>
		<div class="button login">
			<button onclick="login()">
				<span>登录</span>
				<i class="fa fa-check"></i>
			</button>
		</div>
	</div>

	<div class="overbox">
		<div class="material-button alt-2">
			<span class="shape"></span>
		</div>
		<div class="title">注册</div>
		<div class="input">
			<label for="regname">用户名</label>
			<input type="text" name="regname" id="regname">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="regpass">密码</label>
			<input type="password" name="regpass" id="regpass">
			<span class="spin"></span>
		</div>
		<div class="input">
			<label for="reregpass">确认密码</label>
			<input type="password" name="reregpass" id="reregpass">
			<span class="spin"></span>
		</div>
		<div class="button">
			<button onclick="regist()">
				<span>注册</span>
			</button>
		</div>
	</div>

</div>

</body>
</html>